<template>
    <div>
        <div class='form_box'>
            <el-select v-model="value" placeholder="请选择科目" style='margin-left:10px;margin-bottom:7px;'>
                <el-option  v-for="item in options"   :key="item.value"  :label="item.label"  :value="item.value"></el-option>
            </el-select>
            <el-select v-model="value" placeholder="请选择年级" style='margin-left:10px;margin-bottom:7px;'>
                <el-option  v-for="item in options"   :key="item.value"  :label="item.label"  :value="item.value"></el-option>
            </el-select>
            <el-button type="primary" style='margin-left:10px;margin-bottom:7px;'><i class="el-icon-search el-icon--left" ></i>搜索</el-button>
        </div>
        <div class='card_box'>
            <el-card class="box-card" v-for="it in data" :key="it.teacherId">
                    <div class='card_top'>
                        <div class='card_timg'><img src="../assets/man.jpg" alt=""></div>
                        <ul class='card_tinfo'>
                            <li><span class='title'>教师编号：</span><span class='value'>{{it.teacherNo}}</span></li>
                            <li><span class='title'>教师姓名：</span><span class='value'>{{it.name}}</span></li>
                            <li><span class='title'>教学科目：</span><span class='value'>{{it.subjectList}}</span></li>
                            <li><span class='title'>教学年级：</span><span class='value'>{{it.gradeList}}</span></li>
                            <li><span class='title'>学历：</span><span class='value'>{{it.educationStr}}</span></li>
                        </ul>
                    </div>
                    <ul class='card_bottom'>
                        <li>
                            <span>家长满意度：</span>
                            <i class='el-icon-star-on yellow'></i>
                            <i class='el-icon-star-on yellow'></i>
                            <i class='el-icon-star-on hui'></i>
                            <i class='el-icon-star-on hui'></i>
                            <i class='el-icon-star-on hui'></i>
                        </li>
                        <li>
                            <span>教学水平：</span>
                            <i class='el-icon-star-on yellow'></i>
                            <i class='el-icon-star-on hui'></i>
                            <i class='el-icon-star-on hui'></i>
                            <i class='el-icon-star-on hui'></i>
                            <i class='el-icon-star-on hui'></i>
                        </li>
                        <li>
                            <span>教学态度：</span>
                            <i class='el-icon-star-on yellow'></i>
                            <i class='el-icon-star-on yellow'></i>
                            <i class='el-icon-star-on yellow'></i>
                            <i class='el-icon-star-on yellow'></i>
                            <i class='el-icon-star-on yellow'></i>
                        </li>
                        <li>
                            <span>认可程度：</span>
                            <i class='el-icon-star-on hui'></i>
                            <i class='el-icon-star-on hui'></i>
                            <i class='el-icon-star-on hui'></i>
                            <i class='el-icon-star-on hui'></i>
                            <i class='el-icon-star-on hui'></i>
                        </li>
                    </ul>
            </el-card>      
        </div>
        <div class='pagebg'>
            <el-pagination @current-change="currentChange" :page-size="params.pageSize" layout="total, prev, pager, next"  :total="pageTotal" class='pagesbox'>    </el-pagination>
        </div>
    </div>
</template>
<script> 

export default {
    data() {
        return {
             options: [{
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶'
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }, {
                value: '选项4',
                label: '龙须面'
                }, {
                value: '选项5',
                label: '北京烤鸭'
                }],
                value: '',
            data: [],
            params: {
                grade: null,
                subject: null,
                pageNo: 1,
                pageSize: 6
            },
            pageTotal: 0,

        }
    },
    
    methods: {
        getList() {
            this.axios({
                method: 'post',
                url: this.url + 'web/student/TeacherDetail/teacherPageList',
                data: this.params,
                headers: { 'token': this.TOKEN }
            }).then(res => {
                if(res.data.code == 200) {
                    res.data.data.result.forEach(v => {
                        v.subjectList = v.subjectList.join(',')
                        v.gradeList = v.gradeList.join(',')
                    })
                    this.data = res.data.data.result;
                    this.pageTotal = res.data.data.totalCount;
                } else {
                  this.$message({
                      message: res.data.message,
                      type: 'error'
                  })
                }
            })
            
        },
        currentChange(val) {
            log(val)
            this.params.pageNo = val;
            this.getList();
        }
    },
    mounted() {
        this.getList();
    }
}

 

</script>
<style>
.pagebg{margin-bottom: 15px;background: #F2F2F2;border-radius: 5px;margin-top: 5px;padding:10px;margin-bottom: 50px;}
.form_box{margin-bottom: 15px;background: #F2F2F2;border-radius: 5px;margin-top: 10px;padding:10px 10px 3px 10px}
.card_box{overflow: hidden}
.box-card{width: 316px;float :left;margin:0 14px 14px 0;}
.yellow{color:#FDBA02}
.hui{color:#ccc}
.card_top{overflow: hidden;}
.card_timg{float: left;width:110px;overflow: hidden;height:144px;}
.card_timg>img{width:100%;border: 1px solid #ccc;box-sizing: border-box;vertical-align: middle}
.card_tinfo{float: left;width:183px;list-style: none;margin: 0;padding: 0;margin-left: 7px;}
.el-card__body{padding:10px 8px!important;}
.card_tinfo>li{overflow: hidden;line-height:24px;font-size: 14px;}
.card_tinfo>li>.title{width:70px;display:block;float: left;}
.card_tinfo>li>.value{display:block;float: left;width:113px}
.card_bottom{margin-top:15px;padding:0;list-style: none}
.card_bottom>li{margin-bottom: 8px;padding-left: 5px;box-sizing: border-box;}
.card_bottom>li>span{width:97px;float: left;line-height: 28px;}
.card_bottom>li>i{font-size: 25px;margin-right: 8px;}
</style>
